<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>修改个人资料</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_manager.css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_form.css"/>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>

    <style type="text/css">

        .head-portrait-broadside span{
            font-size: 19px;
            /* font-weight: 600; */
            color: #f9ae0082;
        }

        .head-portrait-broadside div{
            padding: 15px 17px;
            display: inline-block;
        }

        .head-portrait-broadside input{
            line-height: 36px;
            padding-left: 40px;
            border-radius: 9px;
            margin: 0 0 0 46px;
        }

        .userInfo-left span {
            display: block;
            font-size: 24px;
            /* font-weight: 531; */
            margin: 10px 31px;
        }

        .head-portrait>a {
            text-align: center;
            position: relative;
            top: 20px;
            left: 54px;
            font-size: 12px;
            height: 21px;
            color: #c64848;
            text-decoration: none;
            /* background-color: beige; */
        }

        .round_icon {
            width: 167px;
            height: 100px;
            border: 1px solid #C9E0E7;
            border-radius: 5px;
            background-color: #F4F7FB;
            display: block;
        }

        #head-portrait-update,#head-portrait-confirm{
            position: absolute;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .head-portrait-update,.head-portrait-confirm{
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            *display: inline;
            *zoom: 1
        }

        .userInfo-head>h3{
            font-size: 33px;
            color: #ffca2e;
            height: 74px;
            line-height: 74px;
        }

        form.shop_form {
            display: inline-block;
            width: 70%;
            margin: 20px 0;
        }

        .head-portrait {
            display: inline-block;
            width: 25%;
        }
    </style>
</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="/render/myhome">个人中心</a>
    </span>
</div>
<div class="clear"></div>
<!-- 面包屑 End -->
<!-- Header End -->

<!-- 我的个人中心 -->
<div class="shop_member_bd clearfix">

    <!-- 左边导航 -->
    <jsp:include page="common/myshop_left.jsp"></jsp:include>
    <!-- 左边导航 End -->

    <!-- 右边购物列表 -->
    <div class="shop_member_bd_right clearfix">
        <div class="shop_meber_bd_good_lists clearfix">
            <div class="title"><h3>基本信息</h3></div>
            <div class="clear"></div>
            <div class="shop_home_form">
                <form action="#" class="shop_form" method="post">
                    <ul>
                        <li>
                            <label>用户id：</label><span id="currentId">${user.id}</span>
                        </li>
                        <li>
                            <label>用户姓名：</label>
                            <input type="text" class="form-text" id="username" value="${user.username}" name="name"/>
                        </li>
                        <li>
                            <label>手机号：</label>
                            <input type="text" class="form-text" id="phone" value="${user.phone}" name="name"/>
                        </li>
                        <li>
                            <label>电子邮箱：</label>
                            <input type="text" class="form-text" id="email" value="${user.email}" name="name"/>
                        </li>
                        <%--<li>
                            <label>性别:</label>
                            <input type="radio" id="-1" class="mr5" name="sex" value="-1"/>保密
                            <input type="radio" id="0" class="ml10 mr5" name="sex" value="0"/>男
                            <input type="radio" id="1" class="ml10 mr5" name="sex" value="1"/>女
                        </li>--%>
                        <li class="bn">
                            <label>&nbsp;</label>
                            <input type="button" class="form-submit" value="保存修改"/>
                        </li>
                    </ul>
                </form>
                <div class="head-portrait">
                    <img src="${user.image}" class="round_icon" alt="">
                    <a href="javascript:void(0);" class="head-portrait-update">修改头像
                        <input type="file" id="head-portrait-update"/>
                    </a>
                    <a href="javascript:void(0);" class="head-portrait-confirm" style="display:none;">确认头像
                        <input id="head-portrait-confirm"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 右边购物列表 End -->

<!-- 我的个人中心 End -->

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>
<!-- Footer End -->

<script type="text/javascript">
    $(function () {
        var updateUrl="/render/user/update_userInfo";
        var headPortraitUrl="/render/user/update_headPortrait";
        var dataURL=null;

        $(".form-submit").click(function () {
            // var Id = $('#currentId').val();
            var email = $('#email').val();
            var phone = $('#phone').val();
            var username = $('#username').val();

            if (email==null){
                HFalert({title: "邮箱不能为空", type: 'warning', confirmButtonText: '确定'});
            }
            if (phone==null){
                HFalert({title: "手机不能为空", type: 'warning', confirmButtonText: '确定'});
            }
            if (username==null){
                HFalert({title: "名字不能为空", type: 'warning', confirmButtonText: '确定'});
            }

            // 访问后台进行登录验证
            $.ajax({
                url : updateUrl,
                async : false,
                cache : false,
                type : "post",
                dataType : 'json',
                data : {
                    email:email,
                    phone:phone,
                    username:username
                },
                success : function(data) {
                    if (data.success) {
                        HFalert({title: data.message, type: 'success', confirmButtonText: '确定'});
                    } else {
                        HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        });

        $(".head-portrait-confirm").click(function () {
            $('.head-portrait-update').show();
            $('.head-portrait-confirm').hide();
            // console.log(dataURL);
            // // 获取图文件流
            var thumbnail = $('#head-portrait-update')[0].files[0];
            // // 生成表单对象，用于接收参数并传递给后台
            var formData = new FormData();
            formData.append('headPortrait', thumbnail);
            $.ajax({
                url : headPortraitUrl,
                type : 'POST',
                data : formData,
                contentType : false,
                processData : false,
                cache : false,
                success : function(data) {
                    if (data.success) {
                        $("#headPortrait").attr("src", $('.round_icon')[0].src);
                        HFalert({title: data.message, type: 'success', confirmButtonText: '确定'});
                    } else {
                        HFalert({title: data.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        });

        // $("#head-portrait-update").on('input',function(){
        $(".head-portrait-update").on("change","input[type='file']",function(){
            // console.log("success");
            $('.head-portrait-update').hide();
            $('.head-portrait-confirm').show();

            var windowURL = window.URL || window.webkitURL;
            dataURL = windowURL.createObjectURL($('#head-portrait-update')[0].files[0]);
            $('.round_icon').attr('src',dataURL);
        });
    });
</script>
</body>
</html>